<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <Script src="./js/vue.js"></Script>
    <title>Document</title>
    <script>
        window.onload = function () {
            var div1Dom = document.getElementById("div1");
            var div2Dom = document.getElementById("div2");
            var div3Dom = document.getElementById("div3");
            var strDom = "<h1>标签\n字符串</h1>";
            div1Dom.innerHTML = strDom;
            div2Dom.innerText = strDom;
            div3Dom.textContent = strDom;
        }
    </script>
</head>
<body>
    <div>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
    <hr>
    <div id="app">
        <!-- 1、 容器对应的vue实例数据仓库中的变量 -->
        <p>string: {{ msg }}</p>
        <p>number: {{ num }}</p>
        <p>boolean: {{ flag }}</p>
        <p>Array: {{ arr }}</p>
        <p>ObjectArray: {{ objArr }}</p>
        <p>Object: {{ user }}</p>
        <p>ArrayObject: {{arrObj}}</p>
        <!-- 当前取值为 null || undefined 输出空字符串 -->
        <p>null: {{ arg1 }}</p>
        <p>undefined: {{ arg2 }}</p>
        <p>imgDom: {{ img }}</p>
        <p>Data: {{ day }}</p>
        <!-- JS简单表达式 -->
        <!-- 匿名变量：遵循JS的变量定义规则 = 匿名变量会知己将值输入到页面，不在内存中保留 -->
        <p>匿名字符串: {{ "string" }}</p>
        <p>匿名字符串: {{ 'string' }}</p>
        <p>匿名字符串: {{ `string` }}</p>
        <p>匿名数值: {{ 123 }}</p>
        <p>匿名布尔: {{ true }}</p>
        <p>匿名数组: {{ [1,2,3,4] }}</p>
        <p>匿名数组:{{ {name:"aa",age:23} }}</p>
        <!-- <p>匿名字符串: {{ string }}</p> -->
        <!-- 对象数组的取值 -->
        <p>arr下标: {{ arr[1] }}</p>
        <p>object键: {{ user.name }}</p>
        <p>object键: {{ user["name"]}}</p>
        <!-- 简单运算：四则，逻辑，比较，三目，字符串拼接 -->
        <p>拼接: {{ msg+"-新字符串" }}</p>
        <p>拼接: {{ msg }}-新字符串</p>
        <p>+:{{ num+100 }}</p>
        <p>逻辑: {{ flag&&true }}</p>
        <p>比较: {{ num > 200 }}</p>
        <p>三目: {{ num==100?"是":"否"}}</p>
        <!-- JS的内置对象 -->
        <p>Math: {{ Math }}</p>
        <p>Math: {{ Math.random() }}</p>
        <p>Math: {{ Math.PI }}</p>
        <p>Math: {{ Array.isArray(arr) }}</p>
        <p>Math: {{ JSON.stringify(arr) }}</p>

        <!-- 特殊值处理，采用textContent向页面进行值的输出 -->
        <div>vue插值表达式不会解析标签字符串：{{ h1Str }}</div>
        <!-- 报错 -->
        <!-- <p id="{{msg}}">将差值表达式定义在属性上</p> -->
        {{ msg }}
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                // JSON:"AAAA",
                msg:"消息",
                num:100,
                flag:true,
                arr:[1,2,3,4],
                objArr:[
                    {a:1},
                    {b:2}
                ],
                user:{
                    name:"tom",
                    age:23
                },
                arrObj:{
                    arr1:[1,2,3],
                    arr2:[4,5,6]
                },
                arg1:null,
                arg2:undefined,
                img:new Image(),
                day:new Date(),
                h1Str:"<h1>H1\n标签</h1>"
        }
    });
    </script>
</body>
</html>